<template>
  <div class="div-wrap1">
    <header class="header-back">
      <i class="iconfont back" @click="goBack">&#xe624;</i>
      <div class="title-div">填写信息</div>
      <br style="clear: both;"/>
    </header>
    <!--商品详情-->
    <div class="div-wrap2">
      <div class="goodsInfo">
        <div class="img-div">
          <img :src="'http://47.92.123.35:9090/' + topImg" alt="" />
        </div>
        <div class="goods-div">
          <p class="goods-name">{{goodsName}}</p>
          <p class="goods-info">{{goodsColor}}-{{goodsMemory}}</p>
          <p class="goods-price">{{price | money}}/月</p>
        </div>
      </div>
      <!--价格信息-->
      <div class="price-div"></div>
      <!--表单信息-->
      <div class="form-div">
        <mt-field
          label="租赁人"
          placeholder="请输入真实姓名"
          v-model="user.customerName">
        </mt-field>
        <mt-field
          label="身份证号"
          placeholder="请输入身份证号码"
          v-model="user.idCard">
        </mt-field>
        <mt-field
          label="手机号"
          placeholder="请输入手机号"
          type="tel"
          v-model="user.customerPhone">
        </mt-field>
        <mt-field
          label= "所在地区"
          placeholder="请选择所在地区"
          @click.native.capture="getCity"
          v-model="user.city"
          :readonly="isReadonly">
        </mt-field>
        <mt-field
          label="留言"
          placeholder="点击编辑"
          type="textarea"
          rows="2"
          v-model="user.leaveMessage">
        </mt-field>
      </div>
      <div class="btn-div">
        <div class="btn" @click="setOrder" v-if="isOriginHei">提交订单</div>
      </div>
      <mt-popup position="bottom" v-model="popupVisible" class="picker-bottom">
        <div class="overflow">
          <div class="queding fr" @click="getCitys">确定</div>
          <div class="qingkong fl" @click="user.city = '';popupVisible = false">清空</div>
        </div>
        <mt-picker
          :slots="slots"
          :visible-item-count="5"
          ref="picker"
          @change="onAddressChange"
          class="picker">
        </mt-picker>
      </mt-popup>
    </div>
  </div>
</template>

<script>
import {addOrder} from '../../api/goods.js'
import myaddress from '../../../static/pca.json'
export default {
  data () {
    return {
      goodsName: '',
      goodsColor: '',
      goodsMemory: '',
      price: 0,
      user: {
        customerName: '',
        idCard: '',
        customerPhone: '',
        city: '',
        leaveMessage: '',
        orderNum: 0,
        userNum: 0,
        sku: 0,
        orderState: '已下单',
        totalPrice: 0,
        buyTime: '1990-01-01 08:00:00',
        month: 0
      },
      popupVisible: false,
      slots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(myaddress),
          className: 'slot1',
          textAlign: 'center'
        },
        {
          divider: true,
          content: '-',
          className: 'slot2'
        },
        {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        },
        {
          divider: true,
          content: '-',
          className: 'slot4'
        },
        {
          flex: 1,
          values: [],
          className: 'slot5',
          textAlign: 'center'
        }
      ],
      fullHeight: document.documentElement.clientHeight,
      height: document.documentElement.clientHeight,
      isOriginHei: true,
      isReadonly: true,
      topImg: ''
    }
  },
  filters: {
    money: function (value) {
      return '￥' + value
    }
  },
  methods: {
    goBack () {
      this.$router.push({
        path: '/goods'
      })
    },
    onAddressChange (picker, values) {
//    console.log(values)
      if (myaddress[values[0]]) {
        picker.setSlotValues(1, Object.keys(myaddress[values[0]]))
        picker.setSlotValues(2, myaddress[values[0]][values[1]])
//      this.user.city = values[0] + values[1] + values[2]
      }
    },
    getCity () {
      this.popupVisible = true
    },
    getCitys () {
      if (this.$refs.picker.getValues()[0] === undefined) {
        this.popupVisible = false
      } else {
        this.user.city = this.$refs.picker.getValues()[0] + this.$refs.picker.getValues()[1] + this.$refs.picker.getValues()[2]
        this.popupVisible = false
      }
    },
    setOrder () {
      let username = /^[\u4E00-\u9FA5A-Za-z]+$/
      let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
      let mobile = /^[1][3,4,5,7,8,9][0-9]{9}$/
      if (!username.test(this.user.customerName)) {
        this.$messagebox.alert('请填写正确用户名！')
        return false
      }
      if (!regIdCard.test(this.user.idCard)) {
        this.$messagebox.alert('请填写正确身份证号！')
        return false
      }
      if (!mobile.test(this.user.customerPhone)) {
        this.$messagebox.alert('请填写正确手机号！')
        return false
      }
      if (this.user.city === '') {
        this.$messagebox.alert('请选择所在地区！')
        return false
      }
      this.$messagebox.confirm('已经确定订单信息无误?').then(() => {
        this.addOrder()
      }).catch(() => {
        this.$messagebox.alert('请检查您的网络')
        return false
      })
    },
    async addOrder () {
      try {
        let time = new Date()
        let times =
        time.getFullYear() + '-' +
        ((time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)) + '-' +
        ((time.getDate()) >= 10 ? time.getDate() : '0' + time.getDate()) + ' ' +
        ((time.getHours()) >= 10 ? time.getHours() : '0' + time.getHours()) + ':' +
        ((time.getMinutes()) >= 10 ? time.getMinutes() : '0' + time.getMinutes()) + ':' +
        ((time.getSeconds()) >= 10 ? time.getSeconds() : '0' + time.getSeconds())
        this.user.buyTime = times
        this.user.orderNum = time - 0 + this.user.sku.toString()
        this.$store.state.orderNum = this.user.orderNum
        await addOrder(this.user)
        this.$router.push('/succss')
      } catch (err) {
        console.log(err)
      }
    }
  },
  created: function () {
    this.goodsName = this.$store.state.goodsName
    this.goodsColor = this.$store.state.goodsColor
    this.goodsMemory = this.$store.state.goodsMemory
    this.user.month = this.$store.state.times
    this.price = this.$store.state.goods_price
    this.user.totalPrice = this.$store.state.goods_price
    console.log(this.user.totalPrice)
    this.user.sku = this.$store.state.sku
    this.user.userNum = this.$store.state.userNum
    this.topImg = this.$store.state.topImg
  },
  mounted () {
    let that = this
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      that.$router.push({
        path: '/goods'
      })
      error
    }
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        that.fullHeight = window.fullHeight
      })()
    }
  },
  watch: {
    fullHeight (val) {
      if (this.height !== val) {
        this.isOriginHei = false
      } else {
        this.isOriginHei = true
      }
    }
  }
}
</script>

<style scoped>
  .div-wrap1{
    background: #f7f8f8;
    height: 100%;
  }
  .header-back{
    height: 2rem;
    position: fixed;
    z-index: 10;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
  }
  .div-wrap2{
    position: fixed;
    z-index: 9;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    padding-top: 2rem;
    overflow-y: scroll;
    width: 100%;
    -webkit-overflow-scrolling: touch;   /*这句是为了滑动更顺畅*/
  }
  .back{
    line-height: 2rem;
    left: .5rem;
    font-size: .8rem;
    position: absolute;
  }
  .title-div{
    line-height: 2rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
  }
  .form-div{
    margin-left: 3%;
    margin-right: 3%;
    margin-top: .5rem;
    border-radius: .5rem;
    box-shadow: 0 0 0.3rem #b5b5b6;
  }
  .goodsInfo{
    /*margin-top: 2rem;*/
    display: flex;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: .5rem;
    background: #ffffff;
    border-radius: .5rem;
    box-shadow: 0 0 0.3rem #b5b5b6;
  }
  .mint-cell{
    border-radius: .5rem;
  }
  .img-div{
    width: 5rem;
    height: 5rem;
  }
  .img-div img{
    width: 100%;
    margin-left: 1rem;
  }
  .goods-div{
    flex: 1;
    margin-left: 2rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
    display: flex;
    justify-content:space-around;
    flex-direction:column;
  }
  .goods-name{
    font-size: .6rem;
  }
  .goods-info{
    font-weight: 300;
    font-size: .6rem;
  }
  .goods-price{
    font-size: .6rem;
    color: #e94975;
  }
  .picker-bottom{
    width: 100%;
  }
  .btn-div{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .5rem 0;
  }
  .btn{
    background: #e94975;
    color: #fff;
    text-align: center;
    border-radius: .8rem;
    height: 1.6rem;
    line-height: 1.6rem;
    font-size: .7rem;
    margin-left: 3%;
    margin-right: 3%;
  }
  .overflow{
    overflow: hidden;
    padding: .3rem;
    font-size: .6rem;
  }
  .queding{
    color: #e94975;
  }
  .qingkong{
    color: #606266;
  }
</style>
